<!DOCTYPE html>
<script src="../resources/js-test.js"></script>
<div id="host">
  <span class="red" id="span">There should be no red</span>
</div>
<script>
description('Checking if styles in the nested shadow roots apply properly to distributed elements.');
var root = document.querySelector('#host').attachShadow({'mode': 'open'});
root.innerHTML = '<div><slot></slot></div><style>::slotted(.red) { color: green; }</style>';
var root2 = root.firstChild.attachShadow({'mode': 'open'});
root2.innerHTML = '<style>::slotted(.red) { background-color: green; color: red; }</style><slot></slot>';
var span = document.querySelector('#span');
shouldBeEqualToString('getComputedStyle(span).color', 'rgb(0, 128, 0)');
shouldBeEqualToString('getComputedStyle(span).backgroundColor', 'rgb(0, 128, 0)');
</script>
